<extend name="Public/detail_index"/>
<block name="pageHeader">
    <include file="Public/detail_header.channel" channel="活动详情"/>
</block>
<block name="pageContent">
    <style>
        a:hover{color: #333;}
        .list-box{margin-top: 0;position: relative;background-color: #F0EFF4;overflow: hidden}

        .goods_details{width: 100%;padding: 1em 0;background-color: #fff;margin-top: 2em;}
        .goods_details img{width: 100%;}
        .details_title {width: 100%;border-bottom: solid 1px #D4D4D4;background-color: #fff}
        .details_title img{width: 100%;}
        .details_title p{font-size: 1em;color: #aaa;margin-top: .4em;padding: 0.5em;}
        .details_title h3{width: 100%;font-size: 1.5em;font-weight: bold;max-height: 60px;padding: 0.5em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;}
        .details_msg{padding: .5em 1.5em;border-bottom: solid 1px #D4D4D4;background-color: #fff;font-size: 1.4em}
        .details_msg div{border-bottom: solid 1px #D4D4D4;padding: .5em 0 .5em 2em;}
        .details_msg_list1{background: url("/Public/Home/images/biao.png") no-repeat left;background-size: 1.5em;}
        .details_msg_list2{background: url("/Public/Home/images/ren.png") no-repeat left;background-size: 1.5em;}
        .details_msg_list4{background: url("/Public/Home/images/dizhi.png") no-repeat left;background-size: 1.5em;}
        div.details_msg_list3{border-bottom: none;color: #ff5500;background: url("/Public/Home/images/renminbi.png") no-repeat left;background-size: 1.5em;}



        .user_details{margin-top: 1em;background-color: #fff;}
        .user_details dd{padding: 0 0 2em;display: flex;flex-wrap:wrap;}
        .sub_user{width: 4.5em;padding: 0 0.3em;text-align: center;margin-top: .5em;}
        .sub_user p{font-size: .8em;overflow: hidden;  text-overflow:ellipsis;  white-space: nowrap;margin-top: 2%}
        .sub_user_img{border-radius: 50%;width: 45px;height:45px;border: 1px solid #aaa;}
        .sub_user_img img{width: 100%;border-radius: 50%;    height: 100%;}
        .user_details .btn{text-align: center;padding: 1em 0;}
        .user_details .btn a{padding: 1em 6em;background-color: #F55F5F;border-radius: 1em;color: #fff;font-weight: bold;font-size: 1.5em;}



        .footer .detail_ico1{ background: url("/Public/Home/images/fenxaing.png") no-repeat center .9em;background-size: 1.5em;}
        .footer .detail_ico2{ background: url("/Public/Home/images/shoucang.png") no-repeat center .9em;background-size: 1.5em;}
        .footer .detail_ico2_on{ background: url("/Public/Home/images/shoucang-on.png") no-repeat center .9em;background-size: 1.5em;color: #1296db}
        .footer .detail_ico3{padding:1em 0 1.2em;font-size: 1.4em; background:#1296db;color: #fff;}
        @media screen and (min-width: 400px) {
            .footer .detail_ico3{padding:1.5em 0 1.6em;font-size: 1.4em; background:#1296db;color: #fff;}
        }
        .footer .detail_ico4{padding:1em 1em; background: url("/Public/Home/images/ren-bai.png") no-repeat center;background-size: 1.5em;}
    </style>
    <div class="list-box">
        <div class="details_title">
            <img src="{$activeList[0].img}" alt="">
            <h3>
                <span>{$activeList[0].title}</span>
            </h3>
            <p>{:date('Y-m-d',$activeList[0]['create_time'])}</p>
        </div>
        <div class="details_msg">
            <div class="details_msg_list1">{:date('Y-m-d H:i',$activeList[0]['start_time'])} 至 {:date('Y-m-d H:i',$activeList[0]['end_time'])}</div>
            <div class="details_msg_list2">已报名{$count}人</div>
            <div class="details_msg_list4">地址：{$activeList[0].address}</div>
            <div class="details_msg_list3">
                <if condition="$activeList[0]['price'] eq 0">免费<else/>¥{$activeList[0].price}</if>
            </div>
        </div>
        <div class="goods_details">
            {$activeList[0].details}
        </div>
        <div class="user_details">
            <dl>
                <dt>已报名（{$count}）</dt>
                <dd>
                    <volist name="UserList" id="vo">
                        <div class="sub_user">
                            <div class="sub_user_img">
                                <img src='<if condition="$vo.headimgurl eq ''">/Public/Home/images/user/portrait.jpg<else/>{$vo.headimgurl}</if>' alt="">
                            </div>
                            <p>{$vo.nickname}</p>
                        </div>
                    </volist>
                </dd>
            </dl>
        </div>
    </div>

    <?php  $_SESSION['url'] = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; 
     ?>
    <!--脚部-->
    <div class="footer">
        <ul style="box-sizing: border-box">
            <li style="border-right: solid 1px #D4D4D4;box-sizing: border-box">
                <a class="detail_ico1" href="javascript:share();">分享</a>
            </li>
            <li>
                <if condition="UID">
                    <a onclick="collection(this)" class="detail_ico2 <if condition="$collection eq '1'"> detail_ico2_on </if>" href="javascript:void(0);">收藏</a>
                    <else/>
                    <a  class="detail_ico2"  href="{:U('User/login')}">收藏</a>
                </if>

            </li>
            <li style="box-sizing: border-box;border-left: solid 1px #D4D4D4;width: 50%">
 
                <if condition="UID">
                <a class="detail_ico3"   href="{:U('Order/confirm_msg?id='.$activeList[0]['id'])}"><i class="detail_ico4"></i>我要报名</a>
                <else/>
                <a class="detail_ico3"  href="{:U('User/login')}"><i class="detail_ico4"></i>我要报名</a>
                </if>

            </li>
        </ul>
    </div>

    <script>
        function share() {
            layer.open({
                type:1,
                offset:'auto',
                area: ['200px', '75px'],
                title:'',
                closeBtn: 0,
                content: "<div style='margin: 0.5em;font-size: 1.4em;'>点击浏览器菜单栏,选择‘分享'。可以把这件商品分享出去！</div>",
                time: 3000
            });
        }
        var regName=/^([\u4e00-\u9fa5]){2,7}$/;
        var regPhone=/^[1][3,4,5,7,8,9][0-9]{9}$/;
        function submit() {
            //var index = parent.layer.getFrameIndex(window.name);
            var pid="{:I('get.pid')}";
            var name=$("#chnName").val();
            var phone=$("#chnPhone").val();
            //console.log(regName.test(name)&&regPhone.test(phone));

            if(regName.test(name)&&regPhone.test(phone)){
                var data ={};
                data['pid'] = pid;
                data['name'] = name;
                data['phone'] = phone;
                data['active_price'] = "{$activeList[0]['price']}";
                data['active_name'] = "{$activeList[0]['title']}";
                data['active_img'] = "{$activeList[0]['img']}";
                $.ajax({
                    url:"{:U('Order/create_goods_order')}",
                    data:data,
                    type:'post',
                    dataType:'json',
                    success:function (data) {
                        parent.location.href=data.url;
                        console.log(data.url);
                    }
                });
            }else{
                layer.msg('请正确填写信息');
                //return false;
            }

        }
    </script>
    <script>
        function collection(a) {
            var active_id="{$activeList[0]['id']}";
            //console.log(active_id);
            var data={};
            data['pid'] =active_id;
            $.ajax({
                url:"{:U('Order/collection')}",
                type:'POST',
                data:data,
                dataType:'json',
                success:function (data) {
                    //console.log(data.status);
                    if(data.status==='0'){
                        $(a).removeClass("detail_ico2_on");
                    }else if(data.status==='1'){
                        $(a).addClass("detail_ico2_on");
                    }
                }
            });


        }
       $(function () {
           $('.goods_details img').removeAttr('height');
       })
    </script>
</block>